<template>
  <!-- 收益趋势饼状图 -->
  <div class="w-full echart-box">
    <a-skeleton-shape v-if="loading" class="w-full" style="height: 296px" />
    <template v-else>
      <a-empty
        style="background-color: rgba(248, 250, 252, 1)"
        description="根据您的筛选统计数据时发现暂无数据，请重新筛选"
        v-if="echartDataEmpty"
      />
      <div v-else class="echart-item" ref="echartBoxRef"></div>
    </template>
  </div>
</template>
<script setup lang="ts">
  import useEcharts from '@/hooks/useEcharts'
  import { formatNumber } from '@/utils'
  import { dispose } from 'echarts/core'
  import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
  import { getChartData } from '../models'

  const props = defineProps({
    echartData: {
      type: Object,
      default: () => {},
    },
    timeData: {
      type: String || Number,
      default: '',
    },
  })

  const loading = ref(true)
  const echartBoxRef = ref()
  let echart_series: any[] = []

  let echartInstance: any = null
  const echartInt = () => {
    const option: any = {
      series: echart_series,
    }

    nextTick(() => {
      echartInstance = useEcharts(echartBoxRef.value)
      echartInstance?.setOption(option, {
        notMerge: true,
      })
    })
    loading.value = false
  }

  onMounted(() => {
    window.addEventListener('resize', () => {
      echartInstance?.resize()
    })
  })

  onBeforeUnmount(() => {
    if (echartInstance) {
      dispose(echartInstance)
    }
  })

  const echartDataEmpty = ref(true)
  watch(
    () => props.echartData,
    (newVal: any) => {
      loading.value = true
      echart_series = []
      const { series_data } = getChartData()

      if (newVal && newVal.barDataList) {
        const hasData = newVal.barDataList.some((item: any) => item.totalAmount != 0)

        if (!hasData) {
          loading.value = false
          echartDataEmpty.value = true
          return
        } else {
          echartDataEmpty.value = false
        }

        newVal.barDataList.forEach((barItem: any) => {
          series_data.find((item: any) => {
            if (item.name == barItem.name) {
              item.name = barItem.name
              item.value = Math.abs(barItem.totalAmount)
              item.source = barItem.totalAmount
              item.count = barItem.count
            }
          })
        })

        echart_series = [
          {
            type: 'pie',
            startAngle: 300, //起始角度
            radius: ['50%', '70%'],
            center: ['50%', '50%'],
            label: {
              formatter: (params: any) => {
                if (props.timeData == '' || props.timeData == undefined || props.timeData == null) {
                  return `${params.name} \n 收入：${formatNumber(params.data.source, false)}元 \n 订单：${params.data.count}单`
                } else {
                  return `${params.name} \n 收入：${formatNumber(params.data.source, false)}元`
                }
              },
              rich: {
                b: {
                  color: '#1E1E1E',
                  fontSize: 12,
                  lineHeight: 14,
                },
                c: {
                  color: '#1E1E1E',
                  fontSize: 12,
                  lineHeight: 14,
                },
              },
            },
            data: series_data,
          },
        ]
        echartInt()
      }
    },
    { immediate: true, deep: true }
  )
</script>
<style lang="less" scoped>
  .echart-box {
    width: 100%;

    .echart-item {
      width: 100%;
      height: 296px;
    }

    .echarts-table {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid #e5e6eb;
    }

    .text-price {
      color: #178fff;
    }

    .color-black {
      color: #1d2129;
    }

    .color-gray {
      color: #4e5969;
    }

    .color-green {
      color: #5bbc3e;
    }

    .color-red {
      color: #ec6571;
    }

    .item-cell {
      width: 100%;
      height: 32px;
      padding: 6px 10px;
      background: #f2f3f5;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .list-cell {
      width: 100%;
      padding: 6px 10px;
    }
  }
</style>
